<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linguistic - phiUture</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
            color: #a34577;
            margin-top: 1rem;
            margin-bottom: 2rem;
        }

        h3 {
            margin-top: -5rem;
            margin-bottom: 1.5rem;
            font-family: serif;
        }

        .btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 1rem 2rem;
            margin: 0.5rem;
            border-radius: 18px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: inline-block;
        }

        .btn:hover {
            background-color: #45a049;
        }

        footer {
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 1rem;
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
        }

        .logo {
            margin-top: 1rem;
            margin-bottom: 0.1rem;
            width: 500px;
            /* Set width */
            height: 500px;
            /* Set height */
            transition: transform 0.3s ease;
            /* Smooth transition for transform */
        }

        .logo:hover {
            transform: scale(1.2);
            /* Zoom effect on hover */
        }
    </style>
</head>

<body>
    <div class="container">

        <img src="/static/logo.png" alt="Logo" class="logo">
        <h3>Select your preferred method for speech synthesis</h3>
        <a href="/tts" class="btn">Generative Text to Speech</a>
        <a href="/gtts" class="btn">Google Text to Speech</a>
    </div>

    <footer>
        Disclaimer: This AI tool is intended for ethical and fair use only.
    </footer>
</body>

</html>